<template>
  <div class="livelihood-event-content scrollbar">
    <TypeFilter :now-type="timeSelect" :select-list="timeList" @change="timeChange"></TypeFilter>
    <p class="sub-title">诉求概览</p>
    
    <div class="list">
      <AppealItem v-for="(item,index) in suqiugailanList" :key="index" :item="item"></AppealItem>
    </div>
    <p class="sub-title">重点关注</p>
    <div class="list">
      <AppealItem v-for="(item,index) in zhongdianguanzhuList" :key="index" :item="item"></AppealItem>
    </div>
    <div v-if="rdgzList&&rdgzList.length>0">
      <p class="sub-title">热点关注</p>
      <WordCloud :data="rdgzList" @wordTypeChange="wordTypeChange"></WordCloud>
    </div>
    <HotWord v-if="rdchList&&rdchList.length>0" :data="rdchList" :wordKey="wordKey"></HotWord>

    <p class="sub-title">情感分析</p>
    <EmotionIndex :data="qgzsList"></EmotionIndex>
    <RegionRank :data="qypmList" @rankTabChange="rankTabChange"></RegionRank>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, toRefs, watch, onActivated, onMounted } from 'vue'
import AppealItem from "./AppealItem.vue"
import WordCloud from "./WordCloud.vue"
import HotWord from "./HotWord.vue"
import EmotionIndex from "./EmotionIndex.vue"
import RegionRank from "./RegionRank.vue"
import EventServe from '@/api/event'
import TypeFilter from '@/views/keyWork/components/typeFilter.vue'
import { useEventStore } from '@/store'
import { storeToRefs } from 'pinia'

import suqiuliangIcon from "@/assets/event/icon-suqiuliang.png"
import manyiduIcon from "@/assets/event/icon-manyidu.png"
import huifulvIcon from "@/assets/event/icon-huifulv.png"
import banjielvIcon from "@/assets/event/icon-banjielv.png"
import zhongdiansuqiuIcon from "@/assets/event/icon-zhongdiansuqiu.png"
import zhongdianrenyuanIcon from "@/assets/event/icon-zhongdianrenyuan.png"

const eventStore = useEventStore()
const { timeList, time, hotWordType, rankType } = storeToRefs(eventStore)

defineOptions({
  name: 'LivelihoodEvent'
})

const timeSelect = ref("")
eventStore.timeSelectList()

const timeChange = (val: string) => {
  timeSelect.value = val
  eventStore.setCurrentTime(val)
  getData()
}


const suqiugailanList = ref([
  { title: '诉求量', num: 0, rate: 0, icon: suqiuliangIcon, unit: '个',id:'suqiuliang', color: ''},
  { title: '满意度', num: 0, rate: 0, icon: manyiduIcon, type: 'pie',id:'manyidu', color: 'orange'},
  { title: '回复率', num: 0, rate: 0, icon: huifulvIcon, type: 'pie',id:'huifulv', color: 'blue'},
  { title: '办结率', num: 0, rate: 0, icon: banjielvIcon, type: 'pie',id:'jiebanlv', color: 'green'},
])

// 获取诉求概览
const getSuQiuGaiLan = () => {
  EventServe.getLivelihoodDemandMap({time: timeSelect.value}).then(res=>{
    let respData = res.data[0]
    suqiugailanList.value[0].num = respData.sqNum;
    suqiugailanList.value[0].rate = respData.sqNumRate;
    suqiugailanList.value[1].num = respData.myd;
    suqiugailanList.value[1].rate = respData.mydRate;
    suqiugailanList.value[2].num = respData.hfl;
    suqiugailanList.value[2].rate = respData.hflRate;
    suqiugailanList.value[3].num = respData.banJieLv;
    suqiugailanList.value[3].rate = respData.banJieLvRate;
  })
}

const zhongdianguanzhuList = ref([
  { title: '重点诉求', num: 0, rate: 0, icon: zhongdiansuqiuIcon, unit: '个', color: 'orange', url:"/event/livelihood?tab=0" },
  { title: '重点人员', num: 0, rate: 0, icon: zhongdianrenyuanIcon, unit: '人', color: 'orange', url:"/event/livelihood?tab=1" },
])
// 获取诉求概览
const getZhongDianGuanZhu = () => {
  EventServe.getRightZdgzTableList({time: timeSelect.value}).then(res=>{
    let respData = res.data[0].data;
    zhongdianguanzhuList.value[0].num = respData.zdsqNum
    zhongdianguanzhuList.value[0].rate = respData.zdsqNumRate
  })
  EventServe.getRightTableMap({time: timeSelect.value}).then(res=>{
    let respData = res.data[0].data;
    zhongdianguanzhuList.value[1].num = respData.keyPersonNum
    zhongdianguanzhuList.value[1].rate = respData.keyPersonRate
  })
}

//词云
const rdgzList = ref([]);
const getWordCloud = () => {
  EventServe.getRdgzWordCloud({time: timeSelect.value}).then(res=>{
    let resData = res.data;
    rdgzList.value = resData
    getReDianGuanZhu()
  })
}

// 获取诉求概览
const rdchList = ref([]);
const rdchAllList = ref([]);
const wordKey = ref("");
const getReDianGuanZhu = () => {
  EventServe.getLowRdgzMap({time: timeSelect.value}).then(res=>{
    let resData = res.data;
    rdchAllList.value = resData;
    if(!wordKey.value)
    wordKey.value = resData[0].type;
    wordTypeChange(wordKey.value)
  })
}

//获取情感指数
const qgzsList = ref({});
const getFourTableMap = () => {
  EventServe.getFourTableMap({time: timeSelect.value}).then(res=>{
    qgzsList.value = res.data
  })
}

//区域排名
const qypmList = ref([])
const currentRankkey = ref(0)
const getRegionRank = (type: number) => {
  let typeName = type==1?"领域排名":'区域排名'
  EventServe.getRegionRank({time: timeSelect.value,type: typeName}).then(res=>{
    qypmList.value = res.data
  })
}

//热点关注词云tab切换
const wordTypeChange = (val: any) => {
  wordKey.value = val;
  hotWordType.value = wordKey.value;
  let arr = rdchAllList.value.find(i=>i.type == val)
  rdchList.value = arr?arr.data:[]
}

const rankTabChange = (type: number) => {
  currentRankkey.value = type
  rankType.value = currentRankkey.value
  getRegionRank(type)
}

const getData = () => {
  getSuQiuGaiLan()
  getZhongDianGuanZhu()
  getWordCloud()
  getFourTableMap()
  getRegionRank(currentRankkey.value)
}

onMounted(() => {
  timeSelect.value = time.value?time.value:timeList.value[0].value
  wordKey.value = hotWordType.value?hotWordType.value:wordKey.value
  currentRankkey.value = rankType.value?rankType.value:currentRankkey.value
  eventStore.setCurrentTime(timeSelect.value)
  getData()
})
</script>

<script lang="ts">

</script>

<style lang="less" scoped>
.livelihood-event-content{
  overflow: auto;
  height: 100vh;
  overflow-y: scroll;
  box-sizing: border-box;
  padding-bottom: 130px;
  position: relative;
  .list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 10px;
  }
  :deep(.type-filter){
    margin-left: 12px;
    max-width: 115px;
    font-size: 16px;
    +.sub-title{
      margin-top: 0px;
    }
    .now-type span{
      max-width: 150px;
    }
  }
}
</style>

